<script setup>
import { ref, reactive, onMounted } from 'vue'
import { userSettingStore } from '@/store/modules/setting'

import kehuxinxi from '@/assets/images/kehuxinxi.png'
import jiahao from '@/assets/images/jiahao.png'
import jianhao from '@/assets/images/jianhao.png'
import dizhibu from '@/assets/images/dizhibu.png'
import dingwei from '@/assets/images/dingwei.png'
import huowuxinxi from '@/assets/images/huowuxinxi.png'
import yingshou from '@/assets/images/yingshou.png'
import diaoduxinxi from '@/assets/images/diaoduxinxi.png'
import gengduo from '@/assets/images/gengduo.png'
import stlogo from '@/assets/images/st_icon.png'

const userSetting = userSettingStore()
const theme = userSetting.theme

const value1 = ref('')

const formRef = ref(null)

const form = reactive({
  name: 'test',
  region: '',
  delivery: false,
  type: 'test',
  resource: '',
  desc: ''
})

const options = reactive([{ name: 'test', vallue: 'test' }])
const selectTable = ref(null)

const rules = reactive({
  name: [{ required: true, message: '请输入运单号', trigger: 'blur' }],
  type: [{ type: 'array', required: true, message: '请至少选择一个业务员', trigger: 'change' }]
})

const tableData = reactive([
  {
    billNo: 'YD20240101011',
    ddfs: '自有车',
    num: 1,
    goodsnum: 11,
    goodsweight: 20,
    goodsvolume: 30,
    goodsname: '测试',
    goodsLen: 1100,
    goodswidth: 1400,
    goodsheight: 1500,
    remark: '备注测试信息'
  },
  {
    billNo: 'YD20240101011',
    ddfs: '自有车',
    num: 1,
    goodsnum: 11,
    goodsweight: 20,
    goodsvolume: 30,
    goodsname: '测试',
    goodsLen: 1100,
    goodswidth: 1400,
    goodsheight: 1500,
    remark: '备注测试信息'
  },
  {
    billNo: 'YD20240101011',
    ddfs: '自有车',
    num: 1,
    goodsnum: 11,
    goodsweight: 20,
    goodsvolume: 30,
    goodsname: '测试',
    goodsLen: 1100,
    goodswidth: 1400,
    goodsheight: 1500,
    remark: '备注测试信息'
  },
  {
    billNo: 'YD20240101011',
    ddfs: '自有车',
    num: 1,
    goodsnum: 11,
    goodsweight: 20,
    goodsvolume: 30,
    goodsname: '测试',
    goodsLen: 1100,
    goodswidth: 1400,
    goodsheight: 1500,
    remark: '备注测试信息'
  },
  {
    billNo: 'YD20240101011',
    ddfs: '自有车',
    num: 1,
    goodsnum: 11,
    goodsweight: 20,
    goodsvolume: 30,
    goodsname: '测试',
    goodsLen: 1100,
    goodswidth: 1400,
    goodsheight: 1500,
    remark: '备注测试信息'
  }
])

const headerCellStyle = () => {
  return { backgroundColor: '#F5F7FA', color: '#0B1532', fontWeight: '400' }
}

// table 合计
const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (index === 3) {
      const values = data.map((item) => item[column.property])
      sums[index] = `${values.length >= 1 ? values.length + '单' : 0}`
    } else {
      sums[index] = ''
    }
  })

  return sums
}

onMounted(() => {
  const scrollBar = selectTable.value.$refs.bodyWrapper.children[0].children[1]
  selectTable.value.$refs.tableWrapper.appendChild(scrollBar)
})
</script>

<template>
  <div class="form_right_content">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <div class="form_right_content_top">
        <div class="form_right_content_top_title">
          <span>创建托运单</span>
        </div>
        <div class="form_right_content_form">
          <el-row :gutter="30">
            <el-col :span="4">
              <el-form-item label="运单号" prop="name" class="custom-formitem">
                <el-input class="custom-input" v-model="form.name" placeholder="请输入运单号" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="始发网点" class="custom-formitem">
                <el-input class="custom-input" v-model="form.name" placeholder="请输入始发网点" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="item_position">
                <div class="item_position_checkbox">
                  <el-checkbox class="custom-input" v-model="form.delivery" label="中转" />
                </div>
                <el-form-item label="中转网点" prop="type" class="custom-formitem">
                  <el-select class="custom-input" v-model="form.type" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="4">
              <el-form-item label="业务员" class="custom-formitem">
                <el-select class="custom-input" v-model="form.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="调度员" class="custom-formitem">
                <el-select class="custom-input" v-model="form.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="制单员" class="custom-formitem">
                <el-select class="custom-input" v-model="form.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- form_right_content_top -->

      <div class="form_kehuxinxi">
        <div class="form_kehuxinxi_title">
          <img :src="kehuxinxi" />
          <span>客户信息</span>
        </div>
        <div class="form_kehuxinxi_content">
          <el-row :gutter="30" class="form_kehuxinxi_content_row">
            <el-col :span="6">
              <el-form-item label="客户名称" label-width="100px" prop="type" label-position="right">
                <el-select
                  class="custom-input-light-gray"
                  v-model="form.type"
                  placeholder="请选择"
                  prop="type"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户项目" label-width="80px" label-position="right">
                <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户单号" label-width="80px" label-position="right">
                <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 客户信息 END -->

      <div class="form_kehuxinxi">
        <div class="form_kehuxinxi_title">
          <i class="title_icon" :style="{ '--theme': theme }">装</i>
          <span>装货信息</span>
          <el-form-item
            style="margin-bottom: 0; margin-left: 150px"
            label="预计装货时间"
            label-position="left"
          >
            <el-date-picker v-model="value1" type="date" placeholder="请选择" />
          </el-form-item>
          <el-form-item
            style="margin-bottom: 0; margin-left: 150px"
            label="预计卸货时间"
            label-position="left"
          >
            <el-date-picker v-model="value1" type="date" placeholder="请选择" />
          </el-form-item>
        </div>
        <div class="form_kehuxinxi_content form_zhuanghuo">
          <div class="form_kehuxinxi_content_row form_zhuanghuo_row">
            <img :src="jiahao" />
            <el-form-item
              style="flex: 1; margin-bottom: 0"
              label="装货地址"
              label-position="right"
              prop="type"
            >
              <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="详细地址" label-position="right">
              <div style="position: relative; width: 100%">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
                <img
                  style="
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    transform: translate3d(0, -50%, 0);
                  "
                  :src="dingwei"
                />
              </div>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系人" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系电话" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <span class="form_zhuanghuo_row_dizhibu"><img :src="dizhibu" />地址簿</span>
          </div>
          <!-- form_zhuanghuo_row -->
          <div class="form_kehuxinxi_content_row form_zhuanghuo_row">
            <img :src="jianhao" />
            <el-form-item
              style="flex: 1; margin-bottom: 0"
              label="装货途径点"
              label-position="right"
              prop="type"
            >
              <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="详细地址" label-position="right">
              <div style="position: relative; width: 100%">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
                <img
                  style="
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    transform: translate3d(0, -50%, 0);
                  "
                  :src="dingwei"
                />
              </div>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系人" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系电话" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <span class="form_zhuanghuo_row_dizhibu"><img :src="dizhibu" />地址簿</span>
          </div>
          <!-- form_zhuanghuo_row -->
          <div class="form_kehuxinxi_content_row form_zhuanghuo_row">
            <img :src="jianhao" />
            <el-form-item
              style="flex: 1; margin-bottom: 0"
              label="卸货途径点"
              label-position="right"
              prop="type"
            >
              <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="详细地址" label-position="right">
              <div style="position: relative; width: 100%">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
                <img
                  style="
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    transform: translate3d(0, -50%, 0);
                  "
                  :src="dingwei"
                />
              </div>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系人" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系电话" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <span class="form_zhuanghuo_row_dizhibu"><img :src="dizhibu" />地址簿</span>
          </div>
          <!-- form_zhuanghuo_row -->
          <div class="form_kehuxinxi_content_row form_zhuanghuo_row">
            <img :src="jiahao" />
            <el-form-item
              style="flex: 1; margin-bottom: 0"
              label="卸货地址"
              label-position="right"
              prop="type"
            >
              <el-select class="custom-input-light-gray" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="详细地址" label-position="right">
              <div style="position: relative; width: 100%">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
                <img
                  style="
                    position: absolute;
                    top: 50%;
                    right: -20px;
                    transform: translate3d(0, -50%, 0);
                  "
                  :src="dingwei"
                />
              </div>
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系人" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item style="flex: 1; margin-bottom: 0" label="联系电话" label-position="right">
              <el-input class="custom-input-light-gray" v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <span class="form_zhuanghuo_row_dizhibu"><img :src="dizhibu" />地址簿</span>
          </div>
          <!-- form_zhuanghuo_row -->
        </div>
      </div>
      <!-- 装货信息 END -->

      <div class="form_kehuxinxi">
        <div class="form_kehuxinxi_title">
          <img :src="huowuxinxi" />
          <span>货物信息</span>
        </div>
        <div class="form_kehuxinxi_content huowouxiangxi">
          <el-table
            class="huowouxiangxi_table"
            :data="tableData"
            style="width: 100%"
            ref="selectTable"
            border
            :header-cell-style="headerCellStyle"
            :style="{ '--el-table-row-hover-bg-color': '#fff' }"
            :summary-method="getSummaries"
            show-summary
            scrollbar-always-on
          >
            <el-table-column type="index" width="50px" fixed="left" />
            <el-table-column show-overflow-tooltip prop="billNo" label="货物名称" width="220px">
              <template #default="scope">
                <el-input
                  class="input_none_border"
                  v-model="scope.row.billNo"
                  placeholder="请输入"
                />
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="ddfs" label="包装" width="140px">
              <template #default="scope">
                <el-select class="input_none_border" v-model="scope.row.ddfs" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="goodsnum" label="件数" align="right" />
            <el-table-column
              show-overflow-tooltip
              prop="goodsweight"
              label="重量（吨）"
              align="right"
            />
            <el-table-column
              show-overflow-tooltip
              prop="goodsvolume"
              label="体积（方）"
              align="right"
            />
            <el-table-column prop="num" label="长*宽*高" width="400px" align="center">
              <template #default="scope">
                <div class="huowuxinxi_size">
                  <div class="size_item">
                    <el-input
                      class="input_none_border"
                      v-model="scope.row.goodsLen"
                      placeholder="请输入"
                    />
                  </div>
                  <span class="size_item_symbol">*</span>
                  <div class="size_item">
                    <el-input
                      class="input_none_border"
                      v-model="scope.row.goodswidth"
                      placeholder="请输入"
                    />
                  </div>
                  <span class="size_item_symbol">*</span>
                  <div class="size_item">
                    <el-input
                      class="input_none_border"
                      v-model="scope.row.goodsheight"
                      placeholder="请输入"
                    />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="remark" label="备注" width="120px" />
          </el-table>
        </div>
      </div>
      <!-- 货物信息 END -->

      <div class="form_kehuxinxi">
        <div class="form_kehuxinxi_title">
          <img :src="yingshou" />
          <span>应收合计</span>
          <span class="form_yingshouxinxi">200.00元</span>
          <el-form-item
            style="width: 234px; margin-bottom: 0; margin-left: 10px"
            label="是否开票"
            label-position="right"
          >
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            style="width: 205px; margin-bottom: 0; margin-left: 20px"
            label="稅点"
            label-position="right"
          >
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item
            style="width: 205px; margin-bottom: 0; margin-left: 20px"
            label="稅金"
            label-position="right"
          >
            <span class="form_yingshouxinxi">99999</span>
          </el-form-item>
          <el-form-item
            style="width: 240px; margin-bottom: 0; margin-left: 20px"
            label="结算方式"
            label-position="right"
            prop="type"
          >
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="form_kehuxinxi_content form_yingshouheji form_kehuxinxi_content_row">
          <el-row class="form_kehuxinxi_content_row">
            <el-col :span="4" class="mgb10">
              <el-form-item label="应收运费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="提货费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="包装费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="装卸费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="送货费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="中转费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="其他运费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="声明价值(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="保价费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="提货" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="送货方式" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 应收合计 END -->

      <div class="form_kehuxinxi">
        <div class="form_kehuxinxi_title">
          <img :src="diaoduxinxi" />
          <span>调度信息</span>
          <el-form-item
            style="width: 65px; margin-bottom: 0; margin-left: 24px"
            label=""
            label-position="right"
          >
            <el-checkbox label="自有车" />
          </el-form-item>
          <el-form-item
            style="width: 65px; margin-bottom: 0; margin-left: 50px"
            label=""
            label-position="right"
          >
            <el-checkbox label="承运商" />
          </el-form-item>
          <el-form-item
            style="width: 65px; margin-bottom: 0; margin-left: 50px"
            label=""
            label-position="right"
          >
            <div
              style="
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: nowrap;
              "
              ><el-checkbox label="神通承运" /><img class="stlogo" :src="stlogo"
            /></div>
          </el-form-item>
        </div>
        <div class="form_kehuxinxi_content form_yingshouheji form_kehuxinxi_content_row">
          <el-row class="form_kehuxinxi_content_row">
            <el-col :span="4" class="mgb10">
              <el-form-item label="司机" label-position="right">
                <div
                  style="
                    position: relative;
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <el-select
                    class="custom-input-light-gray"
                    style="width: 100%"
                    v-model="form.type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                  <div style="position: absolute; top: 2px; right: -26px">
                    <el-icon style="margin-left: 8px" color="#68728E" size="16">
                      <CirclePlus />
                    </el-icon>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="车牌号" label-position="right">
                <div
                  style="
                    position: relative;
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <el-select
                    class="custom-input-light-gray"
                    style="width: 100%"
                    v-model="form.type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                  <div style="position: absolute; top: 2px; right: -26px">
                    <el-icon style="margin-left: 8px" color="#68728E" size="16">
                      <CirclePlus />
                    </el-icon>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="挂车号" label-position="right">
                <div
                  style="
                    position: relative;
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  <el-select
                    class="custom-input-light-gray"
                    style="width: 100%"
                    v-model="form.type"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    />
                  </el-select>
                  <div style="position: absolute; top: 2px; right: -26px">
                    <el-icon style="margin-left: 8px" color="#68728E" size="16">
                      <CirclePlus />
                    </el-icon>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="车型" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="车长" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="form_kehuxinxi_content_row">
            <el-col :span="4" class="mgb10">
              <el-form-item label="副驾" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mgb10">
              <el-form-item label="备注" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="mgb10">
              <el-form-item label="" label-width="10px" label-position="right">
                <div class="tags_list">
                  <el-tag type="primary">三不超</el-tag>
                  <el-tag type="primary">需雨布</el-tag>
                  <el-tag type="primary">有禁区</el-tag>
                  <el-tag type="primary">需回单</el-tag>
                  <el-tag type="primary">需压车</el-tag>
                  <el-tag type="primary">禁止配货</el-tag>
                  <img :src="gengduo" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider />
          <div class="form_diaodu_money">运输成本 <span>892.12元</span></div>
          <el-row class="form_kehuxinxi_content_row">
            <el-col :span="4" class="mgb10">
              <el-form-item label="基础运费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="路桥费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="油卡" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="装卸费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="住宿费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" class="mgb10">
              <el-form-item label="保险费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="form_kehuxinxi_content_row">
            <el-col :span="4">
              <el-form-item label="其他费(元)" label-position="right">
                <el-input
                  class="custom-input-light-gray"
                  v-model="form.name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 调度信息 END -->
    </el-form>
  </div>
  <!-- form_right_ontent -->
</template>

<style lang="scss" scoped>
.mgb10 {
  margin-bottom: 10px;
}

.form_right_content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  ::v-deep(.el-divider--horizontal) {
    margin: 0 0 8px;
  }

  .form_right_content_top {
    padding: 21px 0 0 0;
    height: 144px;
    background: #fff;
    border-radius: 4px 4px 0px 0px;

    .form_right_content_top_title {
      text-align: center;

      span {
        position: relative;
        font-weight: bold;
        font-size: 20px;
        color: #0b1532;
        line-height: 29px;

        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          height: 2px;
          background-color: #0b1532;
        }
      }
    }

    .form_right_content_form {
      padding: 30px 30px 0;

      .item_position {
        position: relative;

        .item_position_checkbox {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }

  .form_kehuxinxi {
    .form_kehuxinxi_title {
      position: relative;
      padding: 0 30px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      height: 40px;
      background: rgba(245, 248, 255, 0.15);

      & img {
        margin-top: 2px;
        width: 18px;
        height: 18px;
      }

      .stlogo {
        margin-top: 4px;
        margin-left: 6px;
        width: 13px;
        height: 100%;
      }

      .title_icon {
        margin-left: 0;
        display: block;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        background-color: var(--theme);
        color: #fff;
        border-radius: 100%;
      }

      & span {
        margin-left: 10px;
        width: 64px;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
        color: #0b1532;
      }

      .form_kehuxinxi_title_date {
        position: absolute;
        left: 50%;
        top: 0;
        height: 40px;
        transform: translate3d(-50%, 0, 0);
      }

      .form_yingshouxinxi {
        margin-left: 8px;
        font-weight: 400;
        font-size: 14px;
        color: #ff4861;
      }
    }

    .form_kehuxinxi_content {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 0 30px;
      height: 48px;
      background: #fff;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    .form_zhuanghuo {
      padding: 14px 30px;
      width: 100%;
      height: auto;
      flex-direction: column;
    }

    .huowouxiangxi {
      padding: 14px 20px;
      height: auto;
      min-height: 160px;
      flex-direction: column;

      .input_none_border {
        border: none;
        outline: 0;

        ::v-deep(.el-input__wrapper) {
          border-radius: 0;
          border: none;
          outline: 0;
          box-shadow: none;
        }

        ::v-deep(.el-select__wrapper) {
          border: none;
          outline: 0;
          box-shadow: none;
        }
      }

      .huowuxinxi_size {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;

        .size_item {
          flex: 1;
        }

        .size_item_symbol {
          padding: 0 6px;
        }
      }
    }

    .form_yingshouheji {
      padding: 14px 10px;
      height: auto;
      flex-direction: column;
    }

    .tags_list {
      display: flex;
      gap: 10px;
      justify-content: flex-start;
      align-items: center;

      & img {
        cursor: pointer;
      }
    }

    .form_kehuxinxi_content_row {
      width: 100%;
    }

    .form_zhuanghuo_row {
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;

      &:last-child {
        margin-bottom: 0;
      }

      .form_zhuanghuo_row_dizhibu {
        margin-left: 70px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        font-weight: 400;
        font-size: 14px;
        color: #68728e;
        line-height: 22px;

        & img {
          margin-top: 4px;
          margin-right: 10px;
        }
      }
    }

    .form_diaodu_money {
      margin-bottom: 10px;
      width: 100%;
      padding-left: 32px;
      font-weight: 500;
      font-size: 14px;
      color: #0b1532;
      line-height: 24px;

      & span {
        margin-left: 10px;
        font-weight: 400;
        font-size: 14px;
        color: #ff4861;
        line-height: 24px;
      }
    }
  }
}

::v-deep(.custom-formitem) {
  display: flex;
  flex-direction: column;
}

.custom-formitem ::v-deep(.el-form-item__label) {
  justify-content: flex-start;
}
</style>

<style scoped>
::v-deep(.custom-input.el-checkbox) {
  height: 20px;
}

.custom-input ::v-deep(.el-input__inner) {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
}

.custom-input ::v-deep(.el-input__wrapper) {
  padding-left: 0;
  box-shadow: none;
}

.custom-input ::v-deep(.el-input__inner:focus) {
  border-bottom: 1px solid #0c6cff;

  /* 你可以根据需要调整焦点颜色 */
}

.custom-input ::v-deep(.el-select__wrapper) {
  padding-left: 0;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  box-shadow: none;
}

.custom-input ::v-deep(.el-select .el-input__inner:focus) {
  border-bottom: 1px solid #0c6cff;

  /* 你可以根据需要调整焦点颜色 */
  box-shadow: none;
}

.custom-input ::v-deep(.el-select .el-input__wrapper) {
  box-shadow: none;
}
</style>
